<template>
  <div>
    <ul>
      <li>
        <input type="text" v-model="val" placeholder="请输入"/>
      </li>
      <li
        :class="{done:todo.done}"
        v-for="(todo,i) in todos"
        :key="todo.title">{{todo.title}}
        <switch :checked="todo.done" @change="switchChange(i)"></switch>

      </li>
      <li>{{active}}/{{total}}</li>
      <li>
        <button @click="add" type="primary">添加</button>
      </li>

    </ul>
  </div>
</template>

<script>
  export default {
    name: "Todo",
    data() {
      return {
        val: ''
      }
    },
    props: ['todos'],
    computed: {
      total() {
        return this.todos.length
      },
      //只筛选为true的结果
      active() {
        return this.todos.filter(item => !item.done).length
      }
    },
    methods: {
      switchChange(i) {
        this.todos[i].done = !this.todos[i].done
      },
      add() {
        if (this.val) {
          this.todos.push({
            title: this.val,
            done: false
          });
          this.val = ''
        }
      }
    }
  }
</script>

<style>
  .done {
    color: greenyellow;
    text-decoration: line-through;
  }

</style>

